<template>
	<view class="pinglun">
		<view class="evalutealone">
			<view class="header">
				<text class="title">用户评价</text>
				<text class="more" @click="more">查看更多></text>
			</view>
			<view class="list" v-if="list.length > 0">
				<div class="c_pannel" v-for="(item, index) in list" :key="index">
					<view class="top">
						<view class="user">
							<image class="avatar" :src="item.avatar"></image>
							<text>{{ item.nickname }}</text>
						</view>
						<view class="time">{{ item.create_time }}</view>
					</view>
					<view class="content" @click="detail(item.id)">{{ item.content }}</view>
					<view class="bottom">
						<view class="block" @click="detail(item.id)">
							<image src="../../../static/chat_c.png" mode="widthFix"></image>
							<text>({{ item.comment_count }})</text>
						</view>
						<view class="block" @tap="dianzan(item.id, item.hasmember == 0 ? 1 : 0, index)">
							<image v-if="item.hasmember == 0" src="../../../static/love.png" mode="widthFix"></image>
							<image v-else src="../../../static/love_ed.png" mode="widthFix"></image>
							<text>({{ item.start_count }})</text>
						</view>
					</view>
				</div>
			</view>
			<view class="nodata" v-else>暂时还没有相关评论</view>
		</view>
		<view class="btn_co" @click="submit">我也要评论</view>
	</view>
</template>

<script>
export default {
	props: ['goodsid', 'type'],
	data() {
		return {
			list: []
		};
	},
	created() {
		this.getData();
	},
	methods: {
		async getData() {
			let $res = await this.$request.post('/landed/getCommentList', {
				data: {
					type: this.type,
					goods_id: this.goodsid,
					limit: 3
				}
			});
			this.list = $res.data.data.list;
		},
		more() {
			uni.navigateTo({
				url: `/pages/house_property/commentlist/commentlist?type=${this.type}&goodsid=${this.goodsid}`
			});
		},
		detail(id) {
			uni.navigateTo({
				url: '/pages/house_property/commentdetail/commentdetail?id=' + id
			});
		},
		submit() {
			uni.navigateTo({
				url: `/pages/house_property/submitcomment/submitcomment?type=${this.type}&goodsid=${this.goodsid}`
			});
		},
		async dianzan(id, is_start, index) {
			let authData = uni.getStorageSync('authData');
			if (!authData) {
				uni.showToast({
					title: '请先登录',
					icon: 'none',
					duration: 2000
				});
				setTimeout(function() {
					uni.navigateTo({
						url: '/pages/login/login'
					});
				}, 2000);
				return false;
			}
			let $res = await this.$request.post('/landed/addStart', {
				data: {
					comment_id: id,
					is_start: is_start
				}
			});
			let list = this.list;
			list[index]['hasmember'] = is_start;
			list[index]['start_count'] += is_start == 1 ? 1 : -1;
			this.list = list;
		}
	}
};
</script>

<style lang="scss" scoped>
.pinglun {
	width: 100%;
	padding: 20upx;
	box-sizing: border-box;
	.btn_co {
		margin-top: 50upx;
		width: 100%;
		height: 100upx;
		border-radius: 20upx;
		background-color: #f3e0df;
		font-size: $uni-font-size-lg;
		color: #f33632;
		text-align: center;
		line-height: 100upx;
	}
}
.evalutealone {
	width: 100%;
	box-sizing: border-box;
	padding: 20upx;
	background-color: #ffffff;
	border-radius: 20upx;
	.header {
		width: 100%;
		line-height: 80upx;
		height: 80upx;
		font-size: $uni-font-size-base;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.title {
			color: #333;
			font-size: $uni-font-size-lg;
			font-weight: 700;
		}
		.more {
			color: #999;
		}
	}
	.list {
		width: 100%;
		.c_pannel {
			width: 100%;
			.top {
				width: 100%;
				height: 80upx;
				font-size: $uni-font-size-base;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #999;
				.user {
					width: 300upx;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					.avatar {
						width: 80upx;
						height: 80upx;
						border-radius: 50%;
					}
					text {
						margin-left: 20upx;
					}
				}
			}
			.content {
				padding: 10upx 0;
				width: 100%;
				line-height: 1.5em;
				font-size: $uni-font-size-base;
				color: #333;
				overflow: hidden; //超出的文本隐藏
				text-overflow: ellipsis; //溢出用省略号显示
				lines: 2;
			}
			.bottom {
				width: 100%;
				height: 60upx;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				.block {
					width: 120upx;
					height: 60upx;
					color: #333;
					font-size: $uni-font-size-base;
					line-height: 60upx;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					image {
						width: 40upx;
						height: 40upx;
					}
				}
			}
		}
	}
}
.nodata {
	font-size: $uni-font-size-base;
	color: #d9d9d9;
}
</style>
